<template>
	<view class="content">
		<image src="../../static/image/ye-bg.png" class="ye-bg" mode=""></image>
		<view class="conBox">
			<view class="main-title">充值余额</view>
			<view class="top">
				<view class="left">
					<view class="text">余额（元）</view>
					<view class="price">{{userData.balance}}</view>
				</view>
				<!-- <view class="right" @click="goInfo('/pages-send/recharge/recharge')">充值</view> -->
			</view>
			<view class="detail">
				<view class="sub-title">
					充值余额
				</view>
				<scroll-view scroll-y="true" class="scroll">
					<view class="navBox">
						<view :class="current==index?'navItems':'navItem'" v-for="(item,index) in list" @click="current=index">
							{{item.price}} <text style="font-size: 26rpx;">元</text>
						</view>
					</view>
					<view class="btn" @click="enter">充值</view>
					<view class="back" @click="back">返回</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {paymentUniversal,userInfo} from '../../common/api.js'
	import WeixinJSBridge from 'weixin-js-sdk';
	var wx = require('weixin-js-sdk');
	export default {
		data() {
			return {
				list:[
					{
						price:'50'
					},{
						price:'100'
					},{
						price:'200'
					},{
						price:'500'
					},{
						price:'1000'
					}
				],
				current:0,
				userData:{}
			}
		},
		onLoad() {
			userInfo({}).then(res=>{
				console.log(res)
				if(res.code==10000){
					this.userData = res.data
				}
			})
		},
		methods: {
			enter(){
				paymentUniversal({
					payable_type:'balance',
					payable_id:this.userData.id,
					method:'wechat',
					amount:this.list[this.current].price
				}).then(res=>{
					console.log(res)
					if(res.code==10000){
						WeixinJSBridge.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.app_id, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳String(Date.now())
							nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
							signature: res.data.pay_sign, // 必填，签名，见附录1
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						WeixinJSBridge.ready(function() {
							WeixinJSBridge.checkJsApi({
								jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
								success: function(res) {
									console.log('22进来',res);
								},
								fail: function(res) {
									console.log(res);
								}
							});
							WeixinJSBridge.chooseWXPay({
								timestamp: res.data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: res.data.nonce_str, // 支付签名随机串，不长于 32 位
								package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
								signType: res.data.sign_type, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
								appId: res.data.app_id,
								paySign: res.data.pay_sign, // 支付签名
								success: function(res) {
									console.log(res)
									uni.showToast({
										title: '充值成功',
										icon: "none"
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta: 2
										});
									},1000)
									
								}
							});
						});
					}
				})
			},
			goInfo(url){
				uni.navigateTo({
					url:url
				})
			},
			back(){
				uni.navigateBack({
					delta: 2
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	width: 750rpx;
	height: 100vh;
	background: #161B39;
	position: relative;
	.ye-bg{
		width: 402rpx;
		height: 482rpx;
		position: absolute;
		right: 17rpx;
		top: 156rpx;
	}
	.conBox{
		width: 750rpx;
		height: 100vh;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		padding: 32rpx;
		box-sizing: border-box;
		.main-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 120rpx;
			text-align: center;
			font-style: normal;
		}
		.top{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 15rpx 50rpx 40rpx;
			box-sizing: border-box;
			.left{
				.text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(255,255,255,.6);
					line-height: 33rpx;
					font-style: normal;
					text-transform: uppercase;
				}
				.price{
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 66rpx;
					color: #FFFFFF;
					line-height: 74rpx;
					font-style: normal;
				}
			}
			.right{
				width: 220rpx;
				height: 88rpx;
				background: #1AA261;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
			}
		}
		.detail{
			width: 100%;
			height: calc(100% - 304rpx);
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;
			.sub-title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 38rpx;
				color: #333333;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
			}
			.sub-title:after{
				content: " ";
				display: block;
				width: 144rpx;
				height: 9rpx;
				background: rgba(26,162,97,0.33);
				border-radius: 5rpx;
				margin-left: 5rpx;
			}
			.scroll{
				width: 100%;
				height: calc(100% - 90rpx);
				margin-top: 40rpx;
				.navBox{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					.navItems{
						width: 176rpx;
						height: 140rpx;
						margin-bottom: 40rpx;
						margin-right: 10rpx;
						margin-left: 10rpx;
						box-sizing: border-box;
						background: #1AA261;
						border-radius: 10rpx;
						font-family: Helvetica;
						font-size: 44rpx;
						color: #fff;
						line-height: 140rpx;
						text-align: center;
						font-style: normal;
					}
					.navItem{
						width: 176rpx;
						height: 140rpx;
						margin-bottom: 40rpx;
						margin-right: 10rpx;
						margin-left: 10rpx;
						box-sizing: border-box;
						background: #FFFFFF;
						border-radius: 10rpx;
						border: 1rpx solid #DDDDDD;
						font-family: Helvetica;
						font-size: 44rpx;
						color: #000000;
						line-height: 140rpx;
						text-align: center;
						font-style: normal;
						
					}
					
				}
				.btn{
					width: 100%;
					height: 88rpx;
					background: #1AA261;
					border-radius: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					font-style: normal;
					margin-top: 120rpx;
				}
				.back{
					width: 100%;
					height: 88rpx;
					// background: #1AA261;
					border-radius: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					line-height: 88rpx;
					text-align: center;
					font-style: normal;
					margin-top: 50rpx;
				}
			}
		}
	}
}

</style>
